<template>
    <el-menu :default-active="activeIndex" class="el-menu-nav" mode="horizontal" :ellipsis="false"
        @select="handleSelect" background-color="rgba(0,0,0,0.8)" text-color="#ecf5ff" active-text-color="#409EFF" >
        <el-menu-item index="0" @click="toHome()">
            <img style="width: 100px" src="../assets/element-plus-logo.svg" alt="Element logo" />
        </el-menu-item>
        <el-sub-menu index="1">
            <template #title>小米</template>
            <el-menu-item index="1-1">14 系列</el-menu-item>
            <el-menu-item index="1-2">13 系列</el-menu-item>
            <el-menu-item index="1-3">12 系列</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>华为</template>
            <el-menu-item index="2-1">Mate 系列</el-menu-item>
            <el-menu-item index="2-2">P 系列</el-menu-item>
            <el-menu-item index="2-3">Nova 系列</el-menu-item>
        </el-sub-menu>
        <div class="flex-grow" />
        <el-menu-item v-if="state.isLogin" @click="goCart()">
            <RouterLink class="router-link-item">
                <i class="icon icon-gouwuche"></i>购物车
            </RouterLink>
        </el-menu-item>
        <el-menu-item v-if="!state.isLogin" @click="goLogin()">
            <RouterLink class="router-link-item">登陆</RouterLink>
        </el-menu-item>

        <el-menu-item v-else @click="logout()">
            <RouterLink class="router-link-item">注销</RouterLink>
        </el-menu-item>
        <el-menu-item>
            <el-input style="width: 240px" placeholder="搜索" :prefix-icon="Search" />
            <!-- <div class="menu-search">

                    <el-input></el-input><el-button><i class="icon icon-search"></i></el-button>
                </div> -->
        </el-menu-item>
    </el-menu>
</template>

<script setup>
import { nextTick, onMounted, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const state = reactive({
    headerScroll: false,// 滚动透明判断
    isLogin: false,// 是否已登陆
})

onMounted(async () => {
    const token = localStorage.getItem('token');
    if (token) {
        state.isLogin = true;
        // 获取购物车数据
    }
})

nextTick(() => {
    document.body.addEventListener('scroll', () => {
        let scrollTop = window.pageYOffset || document.document.documentElement.scrollTop || document.body.scrollTop;
        scrollTop > 100 ? state.headerScroll = true : state.headerScroll = false;

    })
})

const goLogin = () => {
    // 跳转注册页面
    console.log(router);
    router.push('/login');
}
const goCart = () => {
    // 跳转购物车页面
    router.push('/cart');
}

const logout = () => {
    // 清除token
    localStorage.removeItem('token');
    localStorage.removeItem('account');
    state.isLogin = false;
    router.push('/home')
    ElMessage({
        message: '已注销',
        type: 'success',
    })
}
const toHome = ()=>{
    router.push("/home")
}
</script>

<style lang="less" scoped>
@import '../assets/font/iconfont/iconfont.css';

/**
Nav
*/
.el-menu-nav {
    font-size: 14px;
}

.flex-grow {
    flex-grow: 1;
}

// RouterLink样式
.router-link-item {
    text-decoration: none !important;
}

.icon-gouwuche {
    color: white;
    font-size: 16px;
    margin-right: 5px;
}

// nav搜索框
.menu-search {

    // width: 100%;
    //输入框
    .el-input {
        width: 70%;
        background-color: transparent !important;
    }

}
</style>
